<template>
  <div class="contrast_page">

    <!-- 顾问端数据 开始 -->
    <div class="row_box">
      <div class="head">顾问端数据</div>
      <div class="info_box">
        <div class="top_box">
          <span>{{orderInfo.name}}/{{orderInfo.phone}}</span>
          <span>{{orderInfo.cityName}}/{{orderInfo.hospitalName}}</span>
          <span>预约时间：{{orderInfo.appointmentTime}}</span>
          <span>责任人：{{orderInfo.principal}}</span>
          <span>总成交：{{orderInfo.totalDealAmount}}</span>
          <span>总收款：{{orderInfo.totalCollectMoney}}</span>
        </div>
        <div class="tab_box">
          <el-table class="el_table" size="small" border :data="consultantList">
            <el-table-column label="预约时间" prop="appointmentTime" show-overflow-tooltip />
            <el-table-column label="责任人" prop="principal" show-overflow-tooltip />
            <el-table-column label="顾问成交金额" prop="dealAmount" show-overflow-tooltip />
            <el-table-column label="顾问收款金额" prop="collectMoney" show-overflow-tooltip />
            <el-table-column label="操作" prop="">
              <template slot-scope="{row}">
                <el-link type="primary" @click="openDialog(row)" v-if="row.status != 1">修改</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 顾问端数据 end -->

    <!-- 结算端数据 开始 -->
    <div class="row_box">
      <div class="head">结算端数据</div>
      <div class="info_box">
        <div class="top_box">
          <span>{{orderInfo.name}}/{{orderInfo.phone}}</span>
          <span>{{orderInfo.cityName}}/{{orderInfo.hospitalName}}</span>
          <span>预约时间：{{orderInfo.appointmentTime}}</span>
          <span>责任人：{{orderInfo.principal}}</span>
          <span>总成交：{{orderInfo.settleDealAmount}}</span>
          <span>总收款：{{orderInfo.settleCollectMoney}}</span>
        </div>
        <div class="tab_box">
          <el-table class="el_table" size="small" border :data="settlementList">
            <el-table-column label="预约时间" prop="appointmentTime" show-overflow-tooltip />
            <el-table-column label="责任人" prop="principal" show-overflow-tooltip />
            <el-table-column label="结算成交金额" prop="dealAmount" show-overflow-tooltip />
            <el-table-column label="结算收款金额" prop="collectMoney" show-overflow-tooltip />
            <el-table-column label="操作" prop="">
              <template slot-scope="{row}">
                <el-link type="primary" :id="row.id" @click="openSettleDialog(row)">修改</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 结算端数据 end -->

    <!-- 修改收款记录 开始 -->
    <glsx-dialog :show="showDialog" title="修改收款记录" @close="closeDialog()" :appendtobody="true">
      <div class="">
        <el-form ref="editForm" :model="editForm" :rules="editFormRules" class="edit_form" size="small" label-width="120px">
          <div class="form_item_line">
            <el-form-item label="客户姓名：">{{currentInfo.name}}</el-form-item>
            <el-form-item label="客户手机：">{{currentInfo.phone}}</el-form-item>
            <el-form-item label="预约门诊：">{{currentInfo.appointmentOutpatient}}</el-form-item>
            <el-form-item label="预约时间：">{{currentInfo.appointmentTime}}</el-form-item>
            <el-form-item label="成交项目：">{{currentInfo.dealProjects}}</el-form-item>
            <el-form-item label="收款类型：">{{currentInfo.dealType}}</el-form-item>
          </div>
          <el-form-item label="成交金额：" class="long_form_item" prop="dealAmount">
            <el-input v-model="editForm.dealAmount" class="a_input"></el-input>
          </el-form-item>
          <el-form-item label="收款金额：" class="long_form_item" prop="collectMoney">
            <el-input v-model="editForm.collectMoney" class="a_input"></el-input>
          </el-form-item>
          <el-form-item label="收款时间：" class="long_form_item" prop="collectTime">
            <el-date-picker v-model="editForm.collectTime" type="datetime" class="a_input" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="修改备注：" class="long_form_item">
            <el-input type="textarea" v-model="editForm.remark" resize="none" rows="3"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" :loading="loading" @click="saveInfo()">保存</el-button>
        <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
      </div>
    </glsx-dialog>
    <!-- 修改收款记录 end -->

  </div>
</template>
<script>
import { GET_DATACOMPARISON_DIFFINFO } from "@/http/finance";
import { EDITDEALCOLLECTINFO,GET_DEAL_INFO } from "@/http/deal";
import { deepClone, showToast,broadcast } from "@/common/util";
export default {
  name: "ContrastComponent",
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      orderInfo: {},
      consultantList: [],
      settlementList: [],

      // 修改收款记录弹框
      loading: false,
      showDialog: false,
      currentInfo: {},
      editForm: {},
      editFormRules: {
        dealAmount: [
          { required: true, message: "请输入成交金额", trigger: "blur" },
        ],
        collectMoney: [
          { required: true, message: "请输入收款金额", trigger: "blur" },
        ],
        collectTime: [
          { required: true, message: "请选择收款时间", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getInfo();
  },
  mounted() {},
  methods: {
    // 获取详情
    getInfo() {
      let oParams = {};
      oParams.id = this.id;
      GET_DATACOMPARISON_DIFFINFO(oParams).then((res) => {
        let obj = res.data || {};
        this.orderInfo = obj.orderInfo || {};
        this.consultantList = obj.consultantList || [];
        this.settlementList = obj.settlementList || [];
      });
    },

    // 打开弹框
    openDialog(row) {
      this.showDialog = true;
      GET_DEAL_INFO({id:row.id}).then(res => {
        let obj = res.data || {}
        let o = {};
        obj.id = row.id
        o.dealAmount = obj.dealAmount
        o.collectMoney = obj.collectMoney
        o.collectTime = obj.collectTime
        o.remark = obj.remark
        this.editForm = o;
        this.currentInfo = obj;
      })
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.currentInfo = {};
      this.editForm = {};
      this.$refs.editForm.clearValidate();
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      _this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.editForm);
        oParams.id = this.currentInfo.id;
        _this.loading = true;
        EDITDEALCOLLECTINFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "修改成功",
              type: "success",
            });
            _this.getInfo();
            _this.closeDialog();
          }
        });
      });
    },

    // 打开输出结算修订
    openSettleDialog(row) {
      let options = deepClone(this.orderInfo);
      options.type = 3;
      options.id = row.id
      broadcast("appoint.dialog.open", options);
    },
  },
};
</script>
<style lang="scss" scoped>
.contrast_page {
  display: flex;
  .row_box {
    flex: 1;
    margin: 0 10px 0 0;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    .head {
      background: #ebeef5;
      padding: 10px 12px;
      font-size: 16px;
      font-weight: bold;
    }
    .info_box {
      padding: 10px;
      .top_box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        span {
          flex: 0 0 33%;
          padding: 4px;
          box-sizing: border-box;
        }
      }
    }
  }
  .row_box:last-child {
    margin: 0;
  }
}
.form_item_line {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
  }
}
</style>